[ES6系列-03]ES6中关于参数相关特性详解（参数默认值与参数解构赋值与剩余参数）

【原创】码路工人 Coder-Power

大家好，这里是码路工人有力量，我是码路工人，你们是力量。

github-pages
博客园cnblogs

---

今天总结一下 ES6 中跟参数相关的内容。
欢迎补充斧正、留言交流。
让我们互相学习一起进步。

• 1. ES6 参数默认值（非必需参数/可选参数）

  在 ES6 之前，函数的参数是无法设默认值的，聪明的人们当然有变通的方式，通过判断来参在函数刚开始给它赋上预想的初始值。具体在这篇里有介绍。

  扩展阅读： ES5 中参数默认值的手动实现

  到了 ES6，就可以愉快地设定参数默认值了。在下面的defaultParamInEnd函数中，用age = 18来设了默认值。

  /* eg.0
  * set default value for parameters
  */
  //-------------------------------------------------
  
  const defaultParamInEnd = function(name, age = 18) {
      console.log(`name: ${name} -- age: ${age}`)
  }
  
  defaultParamInEnd("Coder Power")
  // name: Coder Power -- age: 18
  
  defaultParamInEnd("Coder Power", 32)
  // name: Coder Power -- age: 32
  
  //-------------------------------------------------

  上面的例子中，设默认值放在了末尾，也是我们 CSharper 惯用的方式，当多个参数有默认值时也是连续地放在尾部。

  C# 中不允许设默认值的参数出现在中间或者不连续，所有可选参数必须放在必需参数的后面。

  那 js 中可不可以，带默认值的参数（也就是非必须参数），不在最后的位置呢？下面例子中我们来试一下。

/* eg.1
* default value of parameters
*/
//-------------------------------------------------

const defaultParamInCenter = function(name, age = 18, gender) {
    console.log(` name: ${name} -- age: ${age} -- gender: ${gender}`)
}

defaultParamInCenter("Coder Power", undefined, "male")
// name: Coder Power -- age: 18 -- gender: male

defaultParamInCenter("Coder Power", null, "male")
// name: Coder Power -- age: null -- gender: male

//-------------------------------------------------

结果显示，非必需参数可以出现在中间位置（后面再跟有必需参数）。

注意在传值上还有以下区别：

- 当我们给带默认值的形参`age`传一个`undefined`的时候，函数里得到了默认值`18`;

- 而当我们传`null`的时候，函数里就没有得到默认值，而是`null`了。

建议在定义函数时还是将非必需参数写在最后，设默认值本身就是为了调用时方便，这样就不必为了凑数去传一个`undefined`，直接不传才是非必须参数设计的初衷。

• 2. 剩余操作符语法获取剩余参数(Rest operator syntax)...

  (...既是剩余操作符语法 又是展开操作符语法 Spread operator syntax，这个另做介绍)

  /* eg.2
  * rest parameters
  */
  //-------------------------------------------------
  
  function restParams(name, ...other) {
      console.log(`name: ${name}`)
      console.log(`other: ${other}`)
  }
  
  restParams("Coder Power", 18, "male")
  // name: Coder Power
  // other: 18,male
  
  //-------------------------------------------------

  从上面的打印信息中other: 18,male 能够看出，other 里放了两个值，也就是剩下的两个参数的值都被它自己接收了。

  而如果没有剩余参数操作符语法，它肯定还是只能接收一个值（也就是第二个参数的值）。这里码路工人认为可以这么理解：

  ... 首先会把它后面传来的参数收集起来，相当于放进[ ]数组，再充当展开操作符语法，相当于做了个拷贝塞到形参other 里。
  或者直接理解为把传过来的剩余参数用展开操作符语法塞到形参other 里。

  • 脑洞一下：展开操作符语法可以不用在参数末尾吗？

    /* eg.3
    * rest parameter operator not in end
    */
    //-------------------------------------------------
    
    function restParamsNotInEnd(...someParams, gender) {
        console.log(`other: ${other}`)
        console.log(`someParams: ${someParams}`)
    }
    
    restParamsNotInEnd("Coder Power", 18, "male")
    // SyntaxError: Rest parameter must be last formal parameter
    
    //-------------------------------------------------

    结果报错了，异常信息显示剩余参数必须置于最后位置 。

• 3. 参数的解构赋值（Destructuring Assignment）

  如果一个方法处理内容简单仅仅用到了一个对象的个别属性，而接收的参数是一个完整的对象时，可以只解构获取想要的内容（也可以是全部属性）。

  /* eg.4
  * Destructuring Assignment of parameters
  */
  //-------------------------------------------------
  
  const person = {
      name: "Coder Power",
      age: 18,
      gender: "male",
      mail: "test@abc.com",
      sister: [
          {
              name: 'Emily',
              age: 22,
              gender: "female"
          },
          {
              name: 'Lucy',
              age: 15,
              gender: "female"
          }
      ],
      address: "avenue city province country"
  }
  
  function sayHello ({ name, age, birthday = 20101219 }) {
      console.log(`Hello! I'am ${ name }, ${ age } years old.`)
  }
  
  sayHello(person)
  // Hello! I'am Coder Power, 18 years old.
  
  //-------------------------------------------------

  实际上{ }解构不仅仅可以用在参数上，写在函数内也是一样的效果。
  这同样还体现在后面要讲到的模块化导入 import的使用上。
  注意：

  • 参数里的解构赋值不支持取别名，其它解构支持别名

  • 但是可以赋默认值

    /* eg.4
    * default value for Destructuring Assignment of parameters
    */
    //-------------------------------------------------
    
    function sayHelloAgain ({ name, age, birthday = 19860101 }) {
        console.log(`Hello! I'am ${ name }, ${ age } years old.`)
        console.log(`Birthday: ${ birthday}`)
    }
    
    sayHelloAgain(person)
    // Hello! I'am Coder Power, 18 years old.
    // Birthday: 19860101
    
    //-------------------------------------------------

    上面的示例中打印出了birthday的默认值。
     
     

---

关于 ES6 中参数相关的内容就介绍到这里，其中用到的还没有讲到的特性，会在后续的文章中一一介绍。

欢迎谬误斧正和转发分享。还可以评论区留个言再走啊~

希望对你能有帮助，下篇再见。

---

欢迎关注分享，一起学习提高吧。
QRCode/微信订阅号二维码

---